<template>
  <VFormRender
      ref="preForm"
      :form-json="formJson"
      :form-data="testFormData"
      :option-data="testOptionData"
  >
    <div slot="testSlot">{{ this.searchParams }}</div>
  </VFormRender>
</template>

<script>
import {setRem2} from "@/utils/rem.js";
import {ModelDesignApi} from "@/api/modeldesign";
import VFormRender from "@/components/public/form-render/index.vue";

export default {
  name: 'preview',

  componentName: "preview",
  components: {
    VFormRender
  },
  // 数据
  data() {
    return {
      formJson: {
        widgetList: [],
        formConfig: {}
      },
      testFormData: {},
      testOptionData: {},
      designerDsv: {},
      searchParams: {}

    }
  },
  created() {

  },
  mounted() {
    const modelId = this.$route.query.modelId; //终端ID
    this.delayRequest(modelId);
  },
  methods: {
    /**
     * 获取模板数据
     * @param modelId
     */ async delayRequest(modelId) {
      const {code, data} = await ModelDesignApi.getScreenLocalTemplate({
        localModelId: modelId
      });
      if (code === 200) {
        const {widgetList, formConfig, resolution} = data;
        if (widgetList) {
          this.formJson.widgetList = JSON.parse(widgetList);
        }
        if (formConfig) {
          this.formJson.formConfig = JSON.parse(formConfig);
        }
        if (resolution) {
          // 重新计算尺寸
          setRem2(19.2, data.resolution.split("*")[0]);
          window.onresize = function () {
            setRem2(19.2, data.resolution.split("*")[0]);
          }
        }
      }
    }
  }

}

</script>
<style lang="scss">
.main-view-area {
  margin: 0 !important;
}
</style>
<style lang="scss" scoped>
.form-widget-container {
  width: 100%;
}

.el-form {
  height: 100%;
}
</style>
